<template>
  <div>
    <el-row>
      <el-col :span="8"></el-col>
      <el-col :span="8" style="margin-top:30px;padding-top:30px;padding-right:50px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);width: 300px;height: 200px;">
        <div style="text-align:center;color: red;font-size: 12px">{{loginError}}</div>
        <el-form
            label-width="120px"
            class="demo-ruleForm"
            status-icon
        >
          <el-form-item label="用户名">
            <el-input v-model="userObj.userName" />
          </el-form-item>

          <el-form-item label="密码">
            <el-input type="password" v-model="userObj.pwd" />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="login()">
              <el-icon style="font-size: 20px;padding-right: 10px;"><Avatar /></el-icon>登陆
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="8"></el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      userObj:{},//登陆信息对象
      loginError:"" //登陆错误提示
    }
  },
  methods:{
    login(){ //登陆
      axios.get("/project/user/login",{
        params:this.userObj
      }).then(resp =>{
        var info = resp.data;//得到响应信息消息体
        if(info == ""){//登陆失败
          this.loginError = "登陆失败";
        }
        else{//登陆成功
          //在sessionStorage中存放登陆信息
          sessionStorage.setItem("loginUser",JSON.stringify(info));
          //跳转首页
          this.$router.push("/index");
        }
      })
    }
  }
}
</script>

<style scoped>

</style>